<template>
    <div class="login-wrap">
        <div class="ms-login">
            <el-row :gutter="20">
                <el-col :span="15"><div class="grid-content bg-purple">
                    <div class="ms-title">出租车计价器远程调价管理系统</div>
                </div></el-col>
                <el-col :span="9"><div class="grid-content bg-purple">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                        <el-form-item prop="username">
                            <el-input class="login-username" v-model="ruleForm.username" placeholder="username">
                                <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="passwd">
                            <el-input class="login-password" type="password" placeholder="password" v-model="ruleForm.passwd" @keyup.enter.native="submitForm('ruleForm')">
                                <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                            </el-input>
                        </el-form-item>
                        <div class="login-btn">
                            <el-button type="primary" v-loading="Loading" @click="submitForm('ruleForm')">登录</el-button>
                        </div>
                        <p class="login-tips">Tips : 用户名和密码随便填。</p>
                    </el-form>
                </div></el-col>
            </el-row>


        </div>
    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                Loading:false,

                url:"/api",
                ruleForm: {
                    username: '',
                    passwd: ''
                },
                role: [],
                qs:[],
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    passwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {

            submitForm(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.Loading = true;

                        this.$axios({
                            method: 'post',
                            url: this.url+"/user/login",
                            data:this.ruleForm
                        }).then((res) => {
                            console.log(res);
                            if (res.data.message == "登录成功") {
                                // this.ruleForm.username = '';
                                // this.ruleForm.passwd = '';
                                this.$message.success(`登录成功`);

                                localStorage.setItem('ms_username',this.ruleForm.username);
                                this.getRole();
                                // this.$router.push('/taximetermgmt');
                                this.Loading = false;

                            } else {
                                this.$message.error(`用户名密码不正确`);
                            }
                        })

                    }else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },

            getRole(){
                let next1 = false;
                let next2 = false;
                let next3 = false;
                let next4 = false;
                let next5 = false;
                let next6 = false;
                let traffic = false;
                let price = false;
                let metrology = false;
                let version = false;
                let record = false;
                let fact = false;
                let company = false;
                let taximetertype = false;
                let pricetype = false;


                this.$axios({
                    method: 'post',
                    url: this.url+"/user/userinfopriv"
                }).then((res) => {
                    this.role = res.data;

                    console.log(this.role);
                    this.role.forEach(function (item, index) {
                        if(item.privilegeid == 1){

                           next1 = true;


                        }else if(item.privilegeid == 2){

                            next2 = true;

                        }else if(item.privilegeid == 4){

                            next3 = true;


                        }else if(item.privilegeid == 8){

                            // this.$router.push('/search');
                            next4 = true;

                        }else if(item.privilegeid == 11){

                            // this.$router.push('/search');
                            next5 = true;

                        }else if(item.privilegeid == 12){

                            // this.$router.push('/search');
                            next6 = true;

                        }else if(item.privilegeid == 5){
                            traffic = true;
                        }else if(item.privilegeid == 6){
                            price = true;
                        }else if(item.privilegeid == 7){
                            metrology = true;
                        }else if(item.privilegeid == 9){
                            version = true;
                        }else if(item.privilegeid == 10){
                            record = true;
                        }else if(item.privilegeid == 14){
                            fact = true;
                        }else if(item.privilegeid == 15){
                            company = true;
                        }else if(item.privilegeid == 16){
                            taximetertype = true;
                        }else if(item.privilegeid == 17){
                            pricetype = true;
                        }

                    });

                    if( fact == true){
                        localStorage.setItem('fact',"1");
                    }else {
                        localStorage.removeItem('fact');
                    }
                    if( company == true){
                        localStorage.setItem('company',"1");
                    }else {
                        localStorage.removeItem('company');
                    }
                    if( taximetertype == true){
                        localStorage.setItem('taximetertype',"1");
                    }else {
                        localStorage.removeItem('taximetertype');
                    }
                    if( pricetype == true){
                        localStorage.setItem('pricetype',"1");
                    }else {
                        localStorage.removeItem('pricetype');
                    }
                    if( version == true){
                        localStorage.setItem('version',"1");
                    }else {
                        localStorage.removeItem('version');
                    }
                    if( record == true){
                        localStorage.setItem('record',"1");
                    }else {
                        localStorage.removeItem('record');
                    }


                    if( next1 == true){
                        localStorage.setItem('taximetermgmt',"1");
                    }else {
                        localStorage.removeItem('taximetermgmt');
                    }
                    if(next2 == true){
                        localStorage.setItem('paramfilemgmt',"1");
                    }else{
                        localStorage.removeItem('paramfilemgmt');
                    }
                    if(next3 == true){
                        localStorage.setItem('check',"1");
                    }else{
                        localStorage.removeItem('check');
                    }
                    if(next4 == true){
                        localStorage.setItem('version',"1");
                    }else{
                        localStorage.removeItem('version');
                    }
                    if(next5 == true){
                        localStorage.setItem('user',"1");
                    }else{
                        localStorage.removeItem('user');
                    }
                    if(next6 == true){
                        localStorage.setItem('role',"1");
                    }else{
                        localStorage.removeItem('role');
                    }



                    if( company == true){
                        this.$router.push('/company');
                    }else  if( fact == true){
                        this.$router.push('/fact');
                    }else if( taximetertype == true){
                        this.$router.push('/taximetertype');
                    }else if( pricetype == true){
                        this.$router.push('/pricetype');
                    }else if(next5 == true){
                        this.$router.push('/user');
                    }else if(next6 == true){
                        this.$router.push('/role');
                    }else if( next1 == true){
                        this.$router.push('/taximetermgmt');
                    }else if(next2 == true){
                        this.$router.push('/paramfilemgmt');
                    }else if(next3 == true){
                        this.$router.push('/check');
                    }else if(next4 == true){
                        this.$router.push('/search');
                    }

                })

            }


        }
    }
</script>

<style scoped>
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
        background-color: #ffffff;
        /*background-image: url(../../assets/img/login-bg.jpg);*/
        background-size: 100%;
    }
    .ms-title{
        margin-top:16%;
        width:100%;
        line-height: 50px;
        text-align: center;
        font-size:20px;
        color: #0077dd;
    }
    .ms-login{
        position: absolute;
        left:24%;
        top:56%;
        width:80%;
        margin:-190px 0 0 -175px;

        /*椭圆边*/
        border-radius: 10px;
        color: black;
        box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 0.5em 1em rgba(0, 0, 0, 0.6);
        text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
        background: hsla(0,0%,100%,.6);
    }
    .ms-content{
        padding: 30px 30px;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:200px;
        height:36px;
        margin-bottom: 10px;

    }
    .login-tips{
        font-size:12px;
        line-height:30px;
        color:#fff;
    }
    .login-username{
        width: 200px;
        padding-top: 30px;
        padding-left: 54px;
        padding-right: 40px;
    }
    .login-password{
        width: 200px;
        padding-bottom: 20px;
        padding-left: 54px;
        padding-right: 40px;
    }
</style>